<template>
	<view>
		<view class="bg-orange" :style="{height:StatusBar+'px'}"></view>
		<view class="contents position-rel">
			<view class="circle-orange"></view>
			<view class="white flex align-end position-rel z-i-1">
				<view class="fontBold f-24">
					餐 厅
				</view>
				<view class=" eng">
					/RESTAURANT
				</view>
			</view>
			<view class="m-t-15 height100">
				<swiper class="swiper" circular :autoplay="true" :interval="3000" @change="swiperChange">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiper-item" @click="jump(item)">
							<image :src="item.cover" class="swiper-item-img"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="">
					<swiperDot :list="banner" :current="current"></swiperDot>
				</view>
			</view>
		</view>
		<view class="p-l-5 p-t-10 " v-if="top_shop&&top_shop.length">
			<view class="fontBold f-20 orange m-b-15 p-l-10" >
				推荐餐厅
			</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="flex p-b-15 p-l-10 p-r-10">
					<view class="top-item" v-for="(item,index) in top_shop" :key="index" @click="toDetail(item)">
						<view class="flex align-center">
							<image :src="item.cover?item.cover.split(',')[0]:''" class="top-img"></image>
						</view>
						<view class="p-t-10 p-l-10 p-r-10 p-b-10">
							<view class="f-16 orange fontBold text-overflow-2 top-title">
								{{item.name}}
							</view>
							<view class="f-12 text-overflow-2 top-text m-t-5">
								{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-l-5 p-t-10 " v-if="coupon&&coupon.length">
			<view class="fontBold f-20 orange m-b-5 p-l-10">
				抵用券
			</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="flex p-b-15 p-l-10 p-r-10 p-t-10">
					<view class="voucher-item flex" v-for="(item,index) in coupon" :key="index">
						<view class="voucher-left orange">
							<view class="f-12">
								抵扣
							</view>
							<view class="f-22 fontBold">
								100
							</view>
							<view class="f-12">
								({{item.discount}}%)
							</view>
						</view>
						<view class="voucher-right flex-1">
							<view class="fontBold">
								{{item.name}}
							</view>
							<view class="flex justify-space-between align-center">
								<!-- 优惠券类型 `limited` tinyint(1) DEFAULT '1' COMMENT '1有限时间 2无限时间', -->
								<view class="f-12 m-r-10">
									{{item.limited==2?'无限期':`${item.end_time} 前`}}
								</view>
								<view class="voucher-btn" @click="toBot(item)">
									去使用
								</view>
							</view>
							<view class="f-12 black-9">
								特殊品类可用
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-l-15 p-r-15 p-t-10 p-b-10 m-b-15 all-dine">
			<view class="flex justify-space-between align-center">
				<view class="fontBold f-20 orange  ">
					全部餐厅
				</view>
				<view class="flex">
					<!-- <view class="align-center flex filter-btn m-r-5" @click="openPop">
						筛选
						<image src="/static/img/xiangxia-white.png" class="xiangxia-white m-l-2"></image>
					</view> -->
					<!-- <view class="filter-btn">
						更多
					</view> -->
				</view>
			</view>
			<view >
				<view class="restaurant-item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="flex align-center">
						<image :src="item.cover?item.cover.split(',')[0]:''" class="restaurant-img"></image>
					</view>
					<view class="p-l-15 p-r-15">
						<view class="restaurant-desc fontBold">
							<view class="orange f-16">
								{{item.name}}
							</view>
							<view class="f-12 m-t-5">
								地址：{{item.address}}
							</view>
							<!-- <view class="f-12 m-t-5">
								厨师：{{item.chef}}
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="text-center black-9 m-t-20" v-if="list&&list.length==0">
				暂无数据
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="popup-filter flex">
					<view class="fil-left">
						<view class="fil-left-item fil-left-act-bor" :class="{'fil-left-act':searchData.cur == 0}" @click="changeCur(0)">
							菜系
						</view>
						<view class="fil-left-item" :class="{'fil-left-act':searchData.cur == 1}" @click="changeCur(1)">
							环境
						</view>
						<view class="fil-left-item" :class="{'fil-left-act':searchData.cur == 2}" @click="changeCur(2)">
							娱乐
						</view>
					</view>
					<view class="fil-right">
						<scroll-view scroll-y="true" :scroll-into-view="scrollId">
							<view class=" p-b-10">
								<view class="orange f-16 fontBold m-b-5" id="cur0">
									菜系
								</view>
								<view class="flex flex-wrap">
									<view class="m-t-5 m-b-5 m-r-10 ser-item" :class="{'ser-item-act':item.id==searchData.cuisine_id}" v-for="(item,index) in searchData.cuisine" :key="index" @click="clickSearch(item,'cuisine_id')">
										{{item.name}}
									</view>
								</view>
							</view>
							<view class=" p-b-10">
								<view class="orange f-16 fontBold m-b-5" id="cur1">
									环境
								</view>
								<view class="flex flex-wrap">
									<view class="m-t-5 m-b-5 m-r-10 ser-item" :class="{'ser-item-act':item.id==searchData.ambient_id}" v-for="(item,index) in searchData.ambient" :key="index" @click="clickSearch(item,'ambient_id')">
										{{item.name}}
									</view>
								</view>
							</view>
							<view class=" p-b-10">
								<view class="orange f-16 fontBold m-b-5" id="cur2">
									娱乐
								</view>
								<view class="flex flex-wrap">
									<view class="m-t-5 m-b-5 m-r-10 ser-item" :class="{'ser-item-act':item.id==searchData.amuse_id}" v-for="(item,index) in searchData.amuse" :key="index" @click="clickSearch(item,'amuse_id')">
										{{item.name}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="flex justify-center btn-wrap">
					<view class="btn-border m-r-10" @click="reset">
						清空
					</view>
					<view class=" btn" @click="closePop">
						查看{{total_hall}}家餐厅
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import swiperDot from "@/components/swiperDot.vue";
	export default {
		components:{
			swiperDot
		},
		data() {
			return {
				banner:[],
				current:0,
				searchData:{
					cur:0,
					cuisine:[],//菜系
					ambient:[],//环境
					amuse:[],//娱乐
					cuisine_id:'',
					ambient_id:'',
					amuse_id:''
				},
				scrollId:'',
				list:[],
				page:1,
				last_page:1,
				top_shop:[],//置顶的店铺
				coupon:[],//优惠券
				total_hall:0,
			}
		},
		onLoad(option) {
			let token = uni.getStorageSync('token');
			if(token){
				this.getIndex();
			}
			let code = this.getUrlCode();
			let shareId = this.getUrlNum();
			if(shareId){
				this.$store.state.shareId = shareId;
			}
			if (code) {
				this.setOpenId(code);
			} else {
				this.getWxLogin();
			}
		},
		onReachBottom(){
			if(this.page >= this.last_page)return;
			this.page++;
			this.getIndex();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getIndex();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			swiperChange(e){
				this.current = e.detail.current;
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/operate/detail?id='+item.id
				})
			},
			getIndex(){
				let data = {
					page:this.page,
					cuisine_id:this.searchData.cuisine_id,
					ambient_id:this.searchData.ambient_id,
					amuse_id:this.searchData.amuse_id,
				}
				this.$http('/apicloud/Shop/shopList',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						let list = datas.list.data;
						this.last_page = datas.list.last_page;
						if(this.page == 1){
							this.searchData.ambient = datas.ambient;
							this.searchData.amuse = datas.amuse;
							this.searchData.cuisine = datas.cuisine;
							this.total_hall = datas.list.total;
							this.coupon = datas.coupon;
							this.top_shop = datas.top_shop;
							this.banner = datas.slideshow;
							this.list = list;
						}else{
							this.list = this.list.concat(list);
						}
						
					}
				})
			},
			getSearch(){
				let data = {
					page:1,
					cuisine_id:this.searchData.cuisine_id,
					ambient_id:this.searchData.ambient_id,
					amuse_id:this.searchData.amuse_id,
				}
				this.$http('/apicloud/Shop/shopList',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.total_hall = datas.list.total;
					}
				})
			},
			reset(){
				this.searchData.cuisine_id = '';
				this.searchData.ambient_id = '';
				this.searchData.amuse_id = '';
				this.page = 1;
				this.getIndex();
			},
			openPop() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
				this.page = 1;
				this.getIndex();
			},
			changeCur(type){
				this.searchData.cur = type;
				this.scrollId = `cur${type}`;
			},
			clickSearch(item,name){
				if(this.searchData[name] == item.id){
					this.searchData[name] = '';
				}else{
					this.searchData[name] = item.id;
				}
				this.getSearch();
			},
			
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			getWxLogin() {
				let currentPath = window.location.href;
				let url = currentPath;
				let shareId = this.$store.state.shareId;
				if(shareId){
					let hasExistingParams = currentPath.includes('?');
					url = hasExistingParams
					  ? `${currentPath}&shareId=${shareId}`  // 已有参数，用 & 追加
					  : `${currentPath}?shareId=${shareId}`; 
				}
				const redirectUri = encodeURIComponent(url);
				let str = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx873edade11749cec&redirect_uri=' +
					redirectUri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
				if (this.isWeixin()) window.location.href = str
			},
			getUrlCode() {
				var url = new URL(window.location.href);
				var searchParams = url.searchParams;
				console.log('code=',searchParams.get('code'))
				return searchParams.get('code');
			},
			getUrlNum() {
				console.log(111)
				var url = new URL(window.location.href);
				var searchParams = url.searchParams;
				
				console.log('shareId=',searchParams.get('shareId'))
				return searchParams.get('shareId');
			},
			setOpenId(code) {
				let data = {
					code
				}
				this.$http('/apicloud/Auth/weChatLogin', data).then(res => {
					console.log('setOpenId=',res)
					if (res.code == 200) {
						if (res.data.info) {
							let token = res.data.info.token;
							uni.setStorageSync('token', token);
							let shareId = this.$store.state.shareId;
							setTimeout(() => {
								if(shareId){
									uni.reLaunch({
										url:'/pages/operate/inviteShow?id='+shareId
									})
								}else{
									this.getIndex();
								}
							}, 200)
						}
					}
				})
			},
			jump(item){//type '0不跳转 1商家 2外链接',
				switch (item.type){
					case 0:
					
					break;
					case 1:
					uni.navigateTo({
						url:'/pages/operate/detail?id='+item.target_id
					})
					break;
					case 2:
					window.open(item.link,'_blank');
					 // var a = document.createElement('a');
					 //    a.href = item.link;
					 //    a.target = '_blank'; // 确保在新窗口或标签页中打开
					 //    document.body.appendChild(a);
					 //    a.click(); // 模拟点击事件来打开链接
					 //    document.body.removeChild(a); // 移除创建的<a>标签
					break;
				}
			},
			toBot(){
				uni.createSelectorQuery()
				        .select('.all-dine')
				        .boundingClientRect(rect => {
				            if (rect) {
				                // 获取当前页面滚动位置
				                uni.createSelectorQuery()
				                    .selectViewport()
				                    .scrollOffset(res => {
				                        // 目标滚动位置 = 当前滚动位置 + rect.top - 导航栏高度（可选）
				                        const scrollTop = res.scrollTop + rect.top - 5; // 50 是微调值，可根据需要调整
				                        uni.pageScrollTo({
				                            scrollTop: scrollTop,
				                            duration: 300
				                        });
				                    })
				                    .exec();
				            }
				        })
				        .exec();
			},
		}
	}
</script>

<style lang="less">
	page{
		overflow-x: hidden;
	}
	.circle-orange {
		width: 650px;
		height: 620px;
		background: #FF5200;
		border-radius: 50%;
		position: absolute;
		top: -340px;
		left: 50%;
		transform: translateX(-50%);
	}

	.eng {
		letter-spacing: 1px;
	}

	.swiper {
		height: 630rpx;
		border-radius: 30rpx;
	}

	.swiper-item {
		display: block;
		height: 600rpx;
		border-radius: 30rpx;
		.swiper-item-img{
			height: 600rpx;
			border-radius: 30rpx;
			width: 100%;
		}
	}
	
	.top-item{
		width: 300rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
		border-radius: 16rpx;
		margin-right: 30rpx;
		.top-title{
			height: 84rpx;
			white-space: normal;
		}
		.top-text{
			height: 64rpx;
			white-space: normal;
		}
		.top-img{
			width: 300rpx;
			height: 240rpx;
			border-radius: 16rpx;
		}
	}
	.voucher-item{
		min-width: 610rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		margin-right: 30rpx;
		
		.voucher-left{
			background: #FFE7DC;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 16rpx 0 0 16rpx;
		}
		.voucher-right{
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 0 16rpx 16rpx 0;
			.voucher-btn{
				width: 130rpx;
				height: 60rpx;
				background: #FF5200;
				border-radius: 30px;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.filter-btn{
		background: #FECB2E;
		color: #ffffff;
		min-width: 120rpx;
		height: 45rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.xiangxia-white{
			width: 20rpx;
			height: 20rpx;
		}
	}
	.restaurant-item{
		margin-top: 30rpx;
		.restaurant-img{
			width: 100%;
			height: 500rpx;
			border-radius: 20rpx;
		}
		.restaurant-desc{
			background: rgba(255,255,255,0.9);
			box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			margin-top: -110rpx;
			position: relative;
			z-index: 2;
		}
	}
	.popup_content {
		width: 750rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;
		.popup-filter{
			min-height: 520rpx;
			max-height: 900rpx;
			width: 750rpx;
		}
		.fil-left{
			width: 210rpx;
			background: #F5F5F5;
			border-radius: 24rpx 0 0 0;
			.fil-left-item{
				color: #484848;
				font-weight: bold;
				height: 100rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.fil-left-act{
				color: #FF5200;
				font-size: 32rpx;
				background: #ffffff;
			}
			.fil-left-act-bor{
				border-radius: 24rpx 0 0 0;
			}
			.fil-left-act::after{
				content: '';
				width: 8rpx;
				height: 30rpx;
				background: #FF5200;
				border-radius: 2px;
				position: absolute;
				left: 8rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.fil-right{
			width: 100%;
			height: 100%;
			padding: 24rpx 5rpx 24rpx 22rpx;
			.ser-item{
				min-width: 160rpx;
				height: 76rpx;
				background: #F0F0F0;
				border-radius: 4rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.ser-item-act{
				background: #FFE7DC;
				color: #FF5200;
			}
		}
		.btn-wrap{
			padding: 24rpx;
			width: 100%;
			box-shadow: 0px -3px 20px rgba(0,0,0,0.05);
		}
		.btn-border{
			width:140rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 60rpx;
			border: 1px solid #B1B1B1;
		}
		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}
	}
</style>